<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <!--     jquery的文件-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="appVue" class="topUser">
    <div class="container-fluid">
        <div class="login-box col-xs-offset-4 col-sm-4">
            <!-- 使用Element UI的表单组件 -->
            <el-form :model="user" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- 用户名输入框 -->
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="user.name"></el-input>
                </el-form-item>
                <!-- 密码输入框 -->
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="user.pwd"></el-input>
                </el-form-item>
                <!-- 提交和重置按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即登入</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button @click="register">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script>
    let appVue = new Vue({
        el: '#appVue',  // 指定Vue实例挂载的元素
        data: {
            user: {  // 用户数据对象
                id: 0,
                name: '',
                pwd: '',
                phone: ''
            },
            isFormValid: true, // 用来控制表单是否有效
            myRules: {  // 表单验证规则
                name: [
                    {required: true, message: '请输入用户名！！', trigger: 'blur'},
                    {min: 1, max: 9, message: '长度在 1 到 9 个字符', trigger: 'blur'}
                ],
                pwd: [
                    {required: true, message: '请输入密码！！', trigger: 'blur'},
                    {min: 1, max: 9, message: '长度在 1 到 9 个字符', trigger: 'blur'}
                ],
            },
        },
        methods: {
            register() {
                location.href = "register.html";
            },
            resetValidation() {
                this.$refs.ruleForm.clearValidate(); // 清除表单验证
            },
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type: 'post',
                            url: '/user/login',
                            dataType: 'text',
                            data: JSON.stringify(this.user),
                            contentType: 'application/json',
                            processData: false, // 确保不要处理数据
                            success: function (data) {
                                if (data === '1') {
                                    alert('登录成功');
                                    window.location.href = 'ok.html'; // 登录成功跳转到首页
                                } else {
                                    alert('用户名或密码错误');
                                }
                            },
                        });
                    }
                });
            },

            // 提交表单
            submitForm(formName) {
                this.isFormValid = false; // 假设表单无效
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.isFormValid = true; // 更新表单有效状态
                        this.login();  // 验证通过则调用登录方法
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            // 重置按钮
            resetForm(formName) {
                this.$refs[formName].resetFields(); // 重置表单字段
                window.location.reload(); // 刷新页面
            },
        },

    })
</script>
</html>